<template>
    <div  class="tmpl">
        <nav-bar title="商品详情"></nav-bar>
        <mt-swipe :auto="4000" >
            <mt-swipe-item v-for="(getshopcarlist,index) in getshopcarlist" :key="index">
                <router-link to="/index">
                    <img :src="getshopcarlist.thumb_path" alt="">
                </router-link>
            </mt-swipe-item>
        </mt-swipe>

        <div class="product-desc">
            <ul>
                <li><span class="product-desc-span">
                    {{getinfo.title}}
                </span></li>
                <li class="price-li">市场价：
                    <s>￥{{getinfo.market_price}}</s> 销售价：<span>￥{{getinfo.sell_price}}</span></li>
                <li class="number-li">购买数量：<span @click="del">-</span><span>{{num}}</span><span @click="add">+</span></li>
                <li>
                    <mt-button type="primary" >立即购买</mt-button>
                    <mt-button type="danger" @click="addGou">加入购物车</mt-button>
                </li>
            </ul>
        </div>
<transition name="ball" @after-enter="transition">
    <div class="ball" v-if="isShow"></div>
</transition>
        <div class="product-props">
            <ul>
                <li>商品参数</li>
                <li>商品货号：{{getinfo.goods_no}}</li>
                <li>库存情况：{{getinfo.stock_quantity}}件</li>
                <li>上架时间：{{getinfo.add_time | DataFormat}}</li>
            </ul>
        </div>

        <ping-lun></ping-lun>
    </div>
</template>

<script>
    import prodTools from "../prodTools";
    import connect from "../connect"
    export default {
        name: "goumai_delt",
        data(){
            return{
                getshopcarlist:[],
                getinfo:[],
                isShow:false,
                num:1
            }
        },
        methods:{
            del(){
                if(this.num<=1) return;
                this.num--
            },
            add(){
                if(this.num>=this.getinfo.stock_quantity) return;
                if(this.num>=this.getinfo.stock_quantity-prodTools.zhao(this.$route.query.id)) {
                    this.num=this.getinfo.stock_quantity-prodTools.zhao(this.$route.query.id)-1;
                }
                this.num++;
            },
            addGou(){
                // console.log("购买");
                // console.log(prodTools.getAll())+"数";
                // console.log()
                if(this.num>this.getinfo.stock_quantity-prodTools.zhao(this.$route.query.id)) return;
                if(prodTools.zhao(this.$route.query.id)>=this.getinfo.stock_quantity) return;
                prodTools.addOrUpdate({
                    id:this.$route.query.id,
                    num:this.num
                })
                this.isShow=true;
                this.num=1;
                connect.$emit("sum",this.num);
            },
            transition(){
                this.isShow=false;
            }
        }
    ,
        created() {
            // console.log(this.$route.query.id);
            var get1="getshopcarlist?id="+this.$route.query.id;
            var get2="getinfo?id="+this.$route.query.id;
            this.Ajax.all([this.Ajax.get(get1),this.Ajax.get(get2)])
            .then(this.Ajax.spread((getshopcarlist,getinfo)=>{
                this.getshopcarlist=getshopcarlist.data.message[0];
                this.getinfo=getinfo.data.message[0];
            }))
            .catch(err=>{
                console.log(err);
            })
        }
    }
</script>

<style scoped>

    .ball-enter-active {
        animation: bounce-in .5s;
    }

    @keyframes bounce-in {
        0% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            /*x,y,z轴的位置*/
            transform: translate3d(140px, -50px, 0);
        }
        75% {
            transform: translate3d(160px, 0px, 0);
        }
        100% {
            transform: translate3d(140px, 300px, 0);
        }
    }

    .mint-swipe {
        height: 230px;
        width: 100%;
        float: left;
    }
    img {
        width: 100%;
        height: 100%;
    }


    /*请ulpadding*/

    .outer-swiper ul,
    .product-desc ul,
    .product-props ul,
    .product-info ul {
        padding: 0;
    }

    .product-desc ul li,
    .product-props ul li,
    .product-info ul li {
        list-style: none;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.5);
        margin-top: 8px;
    }

    .product-desc ul >:nth-child(1) span {
        color: blue;
        font-size: 22px;
        font-weight: bold;
    }

    .product-desc ul >:nth-child(1) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }

    .product-desc ul,
    .product-info ul,
    .product-props ul {
        padding-left: 10px;
    }

    .price-li span {
        color: red;
        font-size: 25px;
    }

    .price-li s {
        margin-right: 16px;
    }


    /*加减*/

    .number-li span {
        display: inline-block;
        border: 2px solid rgba(0, 0, 0, 0.1);
        width: 25px;
    }

    /*商品参数*/

    .product-props ul >:nth-child(1) {
        text-align: left;
    }

    .product-props ul:not(:nth-child(1)) {
        margin-left: 40px;
    }

    .product-info ul {
        margin-bottom: 70px;
        padding: 0 5;
    }

    .number-li span {
        text-align: center;
    }

    .number-li >:nth-child(2) {
        width: 40px;
    }

    .ball {
        border-radius: 50%;
        background-color: red;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 440px;
        left: 120px;
        display: inline-block;
        z-index: 9999;
    }
</style>